<template>
  <div :class="prefixCls">
    <InputGroup>
      <div class="flex">
        <Select
          :options="conditions"
          placeholder="请选择条件"
          v-model:value="values.operation"
          @chagne="changeValue()"
        />
        <Select v-bind="$attrs" allow-clear v-model:value="values.value" @change="changeValue()" />
      </div>
    </InputGroup>
  </div>
</template>

<script lang="ts" setup name="SelectSearch">
  import { withDefaults, ref, onMounted } from 'vue';
  import { InputGroup, Select } from 'ant-design-vue';

  import { useDesign } from '/@/hooks/web/useDesign';
  const { prefixCls } = useDesign('SelectSearch');
  interface ConditionValue {
    value: undefined | string | number;
    operation?: string;
  }
  const emit = defineEmits<{
    (e: 'update:modelValue', value: any): any;
  }>();

  const props = withDefaults(
    defineProps<{
      conditions: any[];
      modelValue: ConditionValue;
    }>(),
    {
      conditions: () => [],
      modelValue() {
        return {
          operation: '=',
          value: undefined,
        };
      },
    },
  );
  const values = ref<ConditionValue>({ operation: '=', value: undefined });
  onMounted(() => {
    if (props.modelValue) {
      values.value = props.modelValue;
    }
  });
  const changeValue = () => {
    // values.value[key] = v;
    emit('update:modelValue', values);
  };
</script>
<style lang="less" scoped></style>
